<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="30" style="margin-bottom:20px;">
        <div class="chart-wrapper inputTop">
          <el-row :gutter="32" style="display:flex;justify-content: space-between;margin-left: 5px;margin-right: 5px;">
            <el-col :xs="24" :sm="8" :lg="6" class="flex" style="padding-left:0">
              <el-input v-model="listQuery.address" placeholder="请输入地址" class="btnScr" :xs="24" :sm="12" :lg="16" />
              <el-button type="primary" icon="el-icon-search" class="btnScrright" :xs="24" :sm="12" :lg="8" @click="search">搜索</el-button>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.type" placeholder="请选择类型" clearable class="btnScr" @change="search">
                <el-option
                  v-for="item in houseTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.roomNumber" placeholder="请选择房间数" clearable class="btnScr" @change="search">
                <el-option
                  v-for="item in roomNumOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.owner" filterable placeholder="请选择业主" clearable class="btnScr" @change="search">
                <el-option
                  v-for="item in ownerListOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.bd" filterable placeholder="请选择BD" clearable class="btnScr" @change="search">
                <el-option
                  v-for="item in BDListOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.operator" filterable placeholder="请选择运营" clearable class="btnScr" @change="search">
                <el-option
                  v-for="item in operatorListOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.status" placeholder="请选择状态" class="btnScr" clearable @change="search">
                <el-option
                  v-for="item in houseStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.tag" filterable placeholder="请选择标签" clearable class="btnScr" @change="search">
                <el-option
                  v-for="item in tagsListOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="2" class="agg">
              <el-button class="add" @click="add">新增</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!---->
    <el-dialog title="" width="80%" custom-class="myDigo inputTop" :show-close="false" :visible.sync="show">
      <h2>新增房产 <i class="el-icon-close" @click="close" /></h2>
      <!---->
      <el-dialog
        width="50%"
        title="我是地图"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div class="mapDFic">我是内容</div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary addBTn" @click="tocloseeAddress">确定</el-button>
          <el-button class="grey-btn addBTn" @click="tocloseeAddress">取 消</el-button>
        </div>
      </el-dialog>
      <!---->
      <div class="digoDiv">
        <el-form ref="postForm" :model="postForm" :rules="rules" label-width="85px" class="formDiv">
          <el-form-item label="房产地址:" :required="true">
            <el-row :xs="24" :sm="24" :lg="24" class="endRight">
              <el-col :xs="4" :sm="4" :lg="3" class="mtright">
                <el-select v-model="postForm.country" value-key="name" placeholder="请选择国家" @change="getRemoteStateList">
                  <el-option
                    v-for="item in countryListOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  />
                </el-select>
              </el-col>
              <el-col :xs="4" :sm="4" :lg="3" class="mtright">
                <el-select v-model="postForm.state" value-key="name" placeholder="请选择省/州" @change="getRemoteCountyList">
                  <el-option
                    v-for="item in stateListOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  />
                </el-select>
              </el-col>
              <el-col :xs="4" :sm="4" :lg="3" class="mtright">
                <el-select v-model="postForm.county" value-key="name" placeholder="请选择区" @change="countySlected">
                  <el-option
                    v-for="item in countyListOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  />
                </el-select>
              </el-col>
              <el-col :xs="4" :sm="4" :lg="4" class="mtright">
                <el-input v-model="postForm.projectName" placeholder="项目名称(选填)" />
              </el-col>
              <el-col :xs="8" :sm="8" :lg="8" class="mtright rightAdd" style="position: relative;">
                <el-form-item prop="address">
                  <el-popover v-model="addressShow" placement="bottom-start" style="width:100%" trigger="manual">
                    <ul v-if="addressAll.length > 0" class="ulLIBop">
                      <li v-for="(item,index) in addressAll" :key="index" @click="changeValue(item.id)">{{ item.address }}</li>
                    </ul>
                    <ul v-if="addressAll.length <= 0">
                      <li style="text-align:center">暂无数据</li>
                    </ul>
                    <div slot="reference">
                      <el-input v-model="postForm.address" placeholder="请输入完整地址" @focus="handleFocus" @blur="handleBlur" @keyup.native="filterData($event)" />
                    </div>
                  </el-popover>
                <!-- <el-select v-model="postForm.address" filterable remote  allow-create     reserve-keyword  default-first-option :remote-method="filterData"    placeholder="请输入完整地址"  @change="changeValue($event)">
                  <el-option @input.native="filterData($event)"
                    v-for="item in addressAll"
                    :key="item.id"
                    :label="item.address"
                    :value="item.id"
                  />
                </el-select> -->
                </el-form-item>
                <span class="mapSpan" @click="toSelectAddress"><i class="el-icon-location-information" />地图选择</span>
              </el-col>
              <!-- <el-col :xs="4" :sm="4" :lg="2" class="mtright rightAdd">

              </el-col> -->
            </el-row>
          </el-form-item>
          <el-row :xs="24" :sm="24" :lg="24" class="endRight">
            <el-col :xs="5" :sm="5" :lg="5" class="mtright">
              <el-form-item label="房产类型:">
                <el-select v-model="postForm.type" placeholder="请选择类型">
                  <el-option
                    v-for="item in houseTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3" class="mtright">
              <el-form-item label="房间:" label-width="44px" class="" prop="roomNumber">
                <el-input v-model="postForm.roomNumber" maxlength="2" oninput="if(value>20)value=20" placeholder="输入数量" />
              </el-form-item>
            </el-col>
            <el-col :xs="3" :sm="3" :lg="3" class="mtright">
              <el-form-item label="卫浴:" label-width="44px" class="" prop="wcNumber">
                <el-input v-model="postForm.wcNumber" maxlength="2" oninput="if(value>20)value=20" placeholder="输入数量" />
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6" class="mtright">
              <el-form-item label="车库:" label-width="44px" class="" prop="carRoomNumber">
                <el-col :xs="11" :sm="11" :lg="11" class="mtright">
                  <el-input v-model="postForm.carRoomNumber" maxlength="2" oninput="if(value>20)value=20" placeholder="输入车库数量" />
                </el-col>
                <el-col :xs="11" :sm="11" :lg="11" class="">
                  <el-input v-model="postForm.carRoomCode" placeholder="输入车库编号" />
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :lg="6" class="mtright">
              <el-form-item label="储藏室:" label-width="58px" prop="storageRoomNumber">
                <el-col :xs="11" :sm="11" :lg="11" class="mtright">
                  <el-input v-model="postForm.storageRoomNumber" maxlength="2" oninput="if(value>20)value=20" placeholder="输入储藏室数量" />
                </el-col>
                <el-col :xs="11" :sm="11" :lg="11" class="" style="padding-left:0">
                  <el-input v-model="postForm.storageRoomCode" placeholder="输入储藏室编号" class="" />
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24" style="display:flex">
            <!-- <el-col :xs="8" :sm="8" :lg="8" class=""> -->
            <!-- <el-form-item label="房产图片:" label-width="80px">
              <Upload v-if="show" v-model="postForm.layoutImage" :urls="postForm.layoutImage" :maxcount="2" title="户型图" format="png,jpg,jpeg" @getImage="changePoster" />
            </el-form-item> -->
            <el-form-item label="房产图片:" label-width="80px">
              <Uploadmut v-if="show" v-model="postForm.layoutImage" :urls="postForm.layoutImage" :maxcount="2" title="户型图" format="png,jpg,jpeg" @getImage="changePoster" />
            </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :xs="5" :sm="5" :lg="5" class=""> -->
            <el-form-item label-width="0" class="right20">
              <Upload v-if="show" v-model="postForm.mainImage" :urls="postForm.mainImage" :maxcount="1" title="主图" format="png,jpg,jpeg" @getImage="changeMainImage" />
            </el-form-item>
            <!-- </el-col> -->
            <!-- <el-col :xs="10" :sm="10" :lg="10" class="right20"> -->
            <el-form-item label-width="0" class="right20">
              <Upload v-if="show" v-model="postForm.detailImage" :urls="postForm.detailImage" :maxcount="5" title="详情图（最多5张）" format="png,jpg,jpeg" @getImage="changeDetailImage" />
            </el-form-item>
            <!-- </el-col> -->
            <!---->
          </el-row>
          <!---->
          <el-row :xs="24" :sm="24" :lg="24" class="borbtoonline">
            <el-form-item label="其他信息:" label-width="80px" class="">
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="交割时间:" label-width="80px" class="itxt">
                  <el-date-picker v-model="postForm.deliveryDate" value-format="yyyy/MM/dd" suffix-icon="fa fa-clipboard" type="date" placeholder="选择日期" style="width: 100%;" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="建筑价格:" label-width="80px" class="itxt" prop="architecturePrice">
                  <el-input v-model="postForm.architecturePrice" prefix-icon="fa fa-usd" placeholder="可输入建筑价格" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="土地价格:" label-width="80px" class="itxt" prop="landPrice">
                  <el-input v-model="postForm.landPrice" prefix-icon="fa fa-usd" placeholder="可输入土地价格" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="账单日:" label-width="80px" class="itxt itxtactive ">
                  <el-date-picker v-model="postForm.billDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="面积单位:" label-width="80px" class="itxt">
                  <el-select v-model="postForm.measureType" placeholder="请选择面积单位">
                    <el-option
                      v-for="item in measureTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="土地面积:" label-width="80px" class="itxt" prop="landMeasure">
                  <el-input v-model="postForm.landMeasure" placeholder="请输入土地面积" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="房屋面积:" label-width="80px" class="itxt" prop="houseMeasure">
                  <el-input v-model="postForm.houseMeasure" placeholder="请输入房屋面积" class="" />
                </el-form-item>
              </el-col>
              <!--              <el-col :xs="6" :sm="6" :lg="6" class="">-->
              <!--                <el-form-item label="房产价格:" label-width="80px" class="itxt itxtactive">-->
              <!--                  <el-input v-model="postForm.totalPrice" placeholder="" class="" />-->
              <!--                </el-form-item>-->
              <!--              </el-col>-->
            </el-form-item>
          </el-row>
          <!---->
          <!---->
          <el-row :xs="24" :sm="24" :lg="24" class="bortopline">
            <el-form-item label="财务信息:" label-width="80px" class="">
              <el-col :xs="8" :sm="8" :lg="8" class="">
                <el-form-item label="收款人姓名:" label-width="90px" class="itxt">
                  <el-input v-model="postForm.payeeName" placeholder="请输入收款人姓名" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="8" :sm="8" :lg="8" class="100px">
                <el-form-item label="收款银行:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.bankName" placeholder="请输入收款银行" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="8" :sm="8" :lg="8" class="">
                <el-form-item label="收款账号:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.bankAccount" placeholder="请输入收款账号" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="10" :sm="10" :lg="10" class="">
                <el-form-item label="BSB/SWIFT CODE:" label-width="130px" class="itxt">
                  <el-input v-model="postForm.bankBsbCode" placeholder="请输入BSB/SWIFT CODE" class="" />
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-row>

          <!---->
          <el-row :xs="24" :sm="24" :lg="24" class="borbtoonline">
            <el-form-item label="其他信息:" label-width="80px" class="">
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="出租费:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.rentPrice" placeholder="请输入周数" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="广告费:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.adPrice" placeholder="请输入广告费" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="管理费:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.managePrice" placeholder="请输入管理费" class="" />
                </el-form-item>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="">
                <el-form-item label="续租费:" label-width="80px" class="itxt">
                  <el-input v-model="postForm.reRentPrice" placeholder="请输入周数" class="" />
                </el-form-item>
              </el-col>

            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary addBTn" @click="submitForm()">保存</el-button>
        <el-button class="grey-btn addBTn" @click="close">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
  </div>
</template>

<script>
// import Upload from '@/components/Upload/SingleImage'add
import { getById, add, update, page, pageByAddress } from '@/api/house'
import { getTagList } from '@/api/tag'
import { list } from '@/api/area'
import { filterName } from '@/api/manager'
import Upload from '@/components/Upload/SingleImage'
import Uploadmut from '@/components/Upload/SingleImageMut'
import {
  houseTypeOptions,
  houseStatusOptions,
  roomNumOptions,
  measureTypeOptions
} from '@/utils/consts'
const defaultForm = {
  country: '',
  state: '',
  county: '',
  address: '',
  projectName: '',
  type: undefined,
  roomNumber: undefined,
  wcNumber: undefined,
  carRoomNumber: undefined,
  carRoomCode: '',
  storageRoomNumber: undefined,
  storageRoomCode: '',
  layoutImage: '',
  mainImage: '',
  detailImage: '',
  deliveryDate: '',
  architecturePrice: undefined,
  landPrice: undefined,
  totalPrice: undefined,
  measureType: undefined,
  houseSource: undefined,
  landMeasure: undefined,
  houseMeasure: undefined,
  billDate: '',
  payeeName: '',
  bankName: '',
  bankAccount: '',
  bankBsbCode: '',
  rentPrice: undefined,
  adPrice: undefined,
  managePrice: undefined,
  reRentPrice: undefined,
  status: undefined,
  id: undefined
}

export default {
  inject: ['reload'],
  components: {
    Upload,
    Uploadmut
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    // const blurText = async(rule, value, callback) => {
    //   const boolean = new RegExp('^[1-9][0-9]*$').test(value)
    //   if (!boolean) {
    //     // this.$message.warning('请输入正整数')
    //     callback('请输入正整数')
    //   }
    // }
    return {
      addressShow: false,
      options: [],
      show: false,
      value: '',
      address: '',
      postForm: Object.assign({}, defaultForm),
      loading: false,
      rules: {
        country: [{ required: true, message: '国家必填', trigger: 'change' }],
        state: [{ required: true, message: '州/市必填', trigger: 'change' }],
        county: [{ required: true, message: '区必填', trigger: 'change' }],
        address: [{ required: true, message: '详细地址必填', trigger: 'change' }],
        roomNumber: [{ pattern: /^[1-9][0-9]*$/, message: '请输入正整数', trigger: ['blur', 'change'] }],
        wcNumber: [{ pattern: /^[1-9][0-9]*$/, message: '请输入正整数', trigger: ['blur', 'change'] }],
        carRoomNumber: [{ pattern: /^[1-9][0-9]*$/, message: '请输入正整数', trigger: ['blur', 'change'] }],
        storageRoomNumber: [{ pattern: /^[1-9][0-9]*$/, message: '请输入正整数', trigger: ['blur', 'change'] }],
        architecturePrice: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }],
        houseMeasure: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }],
        landMeasure: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }],
        landPrice: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }]
        //   architecturePrice: [{ pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正整数,保留两位小数' }]

      },
      innerVisible: false,
      ownerId: null,
      BDId: null,
      operatorId: null,
      tagId: null,
      houseType: '',
      roomQuantity: null,
      houseStatus: '',
      houseQuantity: null,
      listQuery: {
        page: 1,
        limit: 10,
        type: '',
        status: '',
        operator: null,
        bd: null,
        owner: null,
        address: ''
      },
      managerListOptions: [],
      ownerListOptions: [],
      BDListOptions: [],
      operatorListOptions: [],
      countryListOptions: [],
      stateListOptions: [],
      countyListOptions: [],
      tagsListOptions: [],
      selectedCountry: {},
      selectedState: {},
      selectedCounty: {},
      tempRoute: {},
      dialogImageUrl: '',
      dialogVisible: false,
      loadingId: null,
      onlineCourse: false,
      houseTypeOptions,
      houseStatusOptions,
      roomNumOptions,
      measureTypeOptions,
      addressAll: []
    }
  },
  watch: {

  },
  created() {
    console.log('postForm0:', this.postForm)

    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      console.log('postForm1:', this.postForm)
      this.fetchData(id)
    }
    this.tempRoute = Object.assign({}, this.$route)
    this.getRemoteManagerList()
    this.getRemoteAreaList('0')
  },
  mounted() {
    if (this.$route.query.owner) {
      this.listQuery.owner = this.$route.query.owner
    }
    if (this.$route.query.bd) {
      this.listQuery.bd = this.$route.query.bd
    }
    if (this.$route.query.operator) {
      this.listQuery.operator = this.$route.query.operator
    }
    this.search()
  },
  methods: {
    getTest1() {
      return this.listQuery
    },
    handleFocus() {
      this.addressShow = true
      this.addressAll = []
    },
    handleBlur() {
      this.addressShow = false
    },
    changeValue(e) {
      this.postForm = this.addressAll.find(item => item.id === e)
      this.addressAll = []
    },
    filterData(e) {
      this.listQuery.address = this.postForm.address
      this.listQuery.limit = 10
      if (e) {
        pageByAddress(this.listQuery).then(response => {
          this.addressAll = response.data.records
        })
      } else {
        this.addressAll = []
      }
    },
    toSelectAddress() {
      this.innerVisible = true
    },
    tocloseeAddress() {
      this.innerVisible = false
    },
    search() {
      page(this.listQuery).then(response => {
        this.$emit('tableData', response)
        // this.list = response.data.records
        // this.total = response.data.total
        // this.listLoading = false
        // this.$notify({
        //   title: '提示',
        //   message: '查询成功',
        //   type: 'success',
        //   duration: 2000
        // })
      })
    },
    fetchData(id) {
      getById(id).then(response => {
        this.postForm = response.data
        console.log('postForm2:', this.postForm)
      }).catch(err => {
        console.log(err)
      })
    },
    getRemoteManagerList() {
      filterName(0).then(response => {
        if (!response.data) return
        this.ownerListOptions = response.data
        if (!this.isEdit && this.postForm.organizationId === '') {
          // this.postForm.organizationId = response.data[0].id
        }
      })
      filterName(1).then(response => {
        if (!response.data) return
        this.BDListOptions = response.data
        if (!this.isEdit && this.postForm.organizationId === '') {
          // this.postForm.organizationId = response.data[0].id
        }
      })
      filterName(2).then(response => {
        if (!response.data) return
        this.operatorListOptions = response.data
        if (!this.isEdit && this.postForm.organizationId === '') {
          // this.postForm.organizationId = response.data[0].id
        }
      })
      getTagList('HOUSE_TAG').then(response => {
        if (!response.data) return

        this.tagsListOptions = response.data
      })
    },
    getRemoteAreaList(code) {
      list(code).then(response => {
        if (!response.data) return
        this.countryListOptions = response.data
        if (!this.isEdit && this.postForm.country === '') {
          // this.postForm.organizationId = response.data[0].id
        }
      })
    },
    getRemoteStateList(data) {
      console.log(data)
      this.postForm.country = data.name
      this.postForm.state = null
      this.postForm.county = null
      list(data.id).then(response => {
        if (!response.data) return
        this.stateListOptions = response.data
      })
    },
    getRemoteCountyList(data) {
      console.log(data)
      this.postForm.state = data.name
      this.postForm.county = null
      list(data.id).then(response => {
        if (!response.data) return
        this.countyListOptions = response.data
      })
    },
    countySlected(data) {
      console.log(data)
      this.postForm.county = data.name
      list(data.id).then(response => {
        if (!response.data) return
        this.countyListOptions = response.data
      })
    },
    changePoster(val) {
      console.log('val:' + val)
      this.postForm.layoutImage = val.toString()
    },
    changeMainImage(val) {
      console.log('val:' + val)
      this.postForm.mainImage = val.toString()
    },
    changeDetailImage(val) {
      console.log('val:' + val)
      this.postForm.detailImage = val.toString()
    },

    submitForm() {
      console.log(this.postForm)
      this.postForm.id = undefined
      if (this.postForm.country === '') {
        this.$notify({
          title: '提示',
          message: '请填写必填项',
          type: 'error',
          duration: 2000
        })
        return
      }

      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.postForm.id !== undefined) {
            update(this.postForm).then(() => {
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
              this.fetchData(this.postForm.id)
              //    this.reload()
              this.$router.push({ path: 'pageDetail', query: { id: this.postForm.id }})
            })
          } else {
            add(this.postForm).then((res) => {
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.$router.push({ path: 'pageDetail', query: { id: res.data.id }})
            })
          }
          this.loading = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    add() {
      this.show = true
    },
    close() {
      this.show = false
      this.postForm = Object.assign({}, defaultForm)
    },
    save() {
      this.show = false

      this.postForm = Object.assign({}, defaultForm)
    },
    handlePictureCardPreview() {

    },
    handleDownload() {

    },
    handleRemove() {

    }
  }
}
</script>

<style lang="scss" scoped>
.add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;width: 100%;}
.flex{display: flex;justify-content: space-between;align-items: center;padding-right: 8px!important;}
.btnScr{width: 100%;margin-bottom: 15px;}
::v-deep .btnScr input{border-radius:2px;}
.btnScrright{border-radius:2px;margin-top: -15px;}
.agg{padding-left:0px!important;padding-right: 0px!important;margin-right: 5px}
::v-deep .agg .el-input__inner{height: 34px;line-height: 34px;}
::v-deep .btnScr .el-input__inner{height: 34px;line-height: 34px;}
.btnScrright {border-radius: 0 2px 2px 0;height: 34px;}
@media (max-width:1200px) {
.flex{display: flex;justify-content: space-between;align-items: center;padding-left:8px!important; padding-right: 8px!important;}
}
.myDigo h2{background: #343436;}
::v-deep .myDigo .el-dialog__footer{background: #E5E9ED;padding-top: 15px;}
::v-deep .el-dialog.myDigo .el-dialog__body{padding: 0;overflow: hidden;}
::v-deep .el-dialog.myDigo .el-dialog__header{display: none;}
.el-dialog.myDigo h2{height: 58px;display: flex;justify-content: space-between;align-items: center;padding-left: 39px;padding-right: 39px;color: #fff;font-size: 18px; padding-top: 0;
    margin-top: 0;overflow: hidden;font-weight: normal;font-family: 'SourceHanSansSC-regular';}
.el-dialog.myDigo h2 i{font-size: 26px;cursor: pointer;}
::v-deep  .el-dialog.myDigo  .el-dialog__body{text-align: left;}
.mtright{margin-right: 11px;}
::v-deep  .el-upload-list--picture-card .el-upload-list__item{width: 70px;height: 56px;}
::v-deep  .el-upload-list--picture-card .el-upload-list__item div.filediv{width: 100%;height: 100%;}
::v-deep  .el-upload--picture-card{width: 70px!important;height: 56px;line-height: 66px;vertical-align: sub;}
::v-deep .el-upload__text{line-height: initial;color: #cacaca;margin-top: -5px;font-size: 12px;}
.right10{margin-left: 10px;}
.right20{margin-left: 20px;}
::v-deep .itxt label{font-weight: normal;font-size: 12px;}
::v-deep .itxt {margin-bottom: 15px;}
::v-deep .itxtactive label{color: #5AC6B7!important}
.borbtoonline{padding-bottom: 15px;position: relative;}
.borbtoonline::after{
content: "";
    position: absolute;
    left: -51px;
    bottom: 0;
    width: 111%;
    height: 1px;
    background: #f0f0f0;
}
.ulLIBop{max-height: 250px;overflow-y: auto;}
.ulLIBop li{line-height: 28px;}
.bortopline{margin-top: 30px;}
.borbtoonline .el-form-item{margin-bottom: 15px;}
.formDiv{padding-left: 39px;padding-right: 39px;}
 ::v-deep .el-upload-list__item-thumbnail{width: 100%;padding-right: 0px;max-width: 70px;max-height: 56px;}
 .mtright  ::v-deep  .el-form-item__label{padding: 0 10px 0 0;font-size: 12px;color: #101010;font-weight: normal;}
 .endRight .mtright:last-child{margin-right: 0;}
.digoDiv ::v-deep .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
    text-indent: 5px;
}
.mapDFic{height:400px;}
.mapSpan{position: absolute;width: 90px;right: -95px;top: 0;}
::v-deep .el-select-dropdown__item{font-size: 12px;}
.addBTn{width: 107px;height: 44px;}
@media screen and (max-width: 1520px) {
     .mtright{margin-right: 8px;}
}
@media screen and (max-width: 1370px) {
     .mtright{margin-right: 6px;}
}
@media screen and (max-width: 1200px) {
     .mtright{margin-right: 0px;}
}

      ::v-deep  .inputTop input::-webkit-input-placeholder, textarea::-webkit-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

      ::v-deep  .inputTop input:-moz-placeholder, textarea:-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

       ::v-deep .inputTop input::-moz-placeholder, textarea::-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

      ::v-deep  .inputTop input:-ms-input-placeholder, textarea:-ms-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }
        ::v-deep  .el-form-item--medium .el-form-item__label{color: #101010;font-size: 12px;font-weight: normal;}

</style>

